<template>
  <div class="app">
    <add @addItem="addItem"></add>
    <hr />
    <list :arr="arr"></list>
    <hr />
    <Footer></Footer>
  </div>
</template>

<script>
/* 
数据所在位置：
哪个组件使用数据，在哪个组件当中初始化数据
哪些组件使用该数据，在他们共同父级组件当中初始化


*/
import Add from "./components/Add.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer";
export default {
  data() {
    return {
      arr: ["吃饭", "睡觉", "打豆豆"],
    };
  },
  mounted() {
    this.$eventBus.$on("emptyArr", this.emptyArr);
  },
  components: {
    Add,
    List,
    Footer,
  },
  methods: {
    addItem(msg) {
      console.log("是否能收集到" + msg);
      // 收集到数据后将其添加到arr当中
      this.arr.push(msg);
    },
    emptyArr() {
      this.arr = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  margin: 50px;
  border: 5px solid red;
}
</style>